<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form mt-10" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业班组" clearable>
                        <auto-search-resource searchType="JOB_ZY" searchName="resourceName"
                                              :name="condition['search_LIKE_workTeamName']"
                                              @selectName="v=>condition['search_LIKE_workTeamName']=v"></auto-search-resource>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业日期起">
                        <el-date-picker v-model="condition['search_GTE_jobTime']"
                                        :picker-options="startPickerOptions" type="date" placeholder="起始日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业日期止">
                        <el-date-picker v-model="condition['search_LTE_jobTime']"
                                        :picker-options="endPickerOptions" type="date" placeholder="结束日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="登录账号">
                        <el-input v-model="condition['search_LIKE_userName']"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-button type="primary" class="ml-100" @click="loadData">查 询</el-button>
                <el-button @click="handleExport">导出Excel</el-button>
            </el-row>
        </el-form>
        <el-table :data="detail" border stripe max-height="500" class="mt-10">
            <el-table-column prop="date" label="作业日期"  min-width="120"></el-table-column>
            <el-table-column prop="workTeam" label="作业班组"  min-width="120"></el-table-column>
            <el-table-column prop="userName" label="登录账号"  min-width="120"></el-table-column>
            <el-table-column prop="personName" label="作业人员"  min-width="120"></el-table-column>
            <el-table-column prop="businessType" label="计件类型"  min-width="160"></el-table-column>
            <el-table-column prop="presentMachine" label="作业机械"  min-width="120"></el-table-column>
            <el-table-column prop="containerNum" label="自然箱"  min-width="100"></el-table-column>
            <el-table-column prop="teu" label="作业标箱量"  min-width="120"></el-table-column>
            <el-table-column prop="piece" label="计件工时"  min-width="110"></el-table-column>
        </el-table>
    </div>
</template>

<script>
    import { wzWorkTeamDetail } from "@/api/balance/balance";
    import autoSearchResource from '@/components/autocomplete/autoSearchResource'
    import { newExportExcel } from "@/utils/newExport";

    export default {
        name: "作业明细",
        components: { autoSearchResource },
        data() {
            return {
                created: true,
                condition: {
                    search_LIKE_workTeamName: '',
                    search_GTE_jobTime: '',
                    search_LTE_jobTime: '',
                    search_LIKE_userName: '',
                },
                detail: []
            }
        },
        mounted() {
            const data = JSON.parse(sessionStorage.getItem('classDetailWz'))
            console.log(data)
            this.condition = data
            this.loadData()
        },
        activated() {
            if (!this.created) {
                this.loadData()
            }
        },
        methods: {
            loadData() {
                this.created = false
                let params = this.$assist.copySearchConditions(this.condition)
                wzWorkTeamDetail(params).then(res => {
                    this.detail = res.data.aaData
                })
            },
            handleExport() {
                let map = new Map();
                map.set('date', '作业日期')
                map.set('workTeam', '作业班组')
                map.set('userName', '登录账号')
                map.set('personName', '作业人员')
                map.set('businessType', '计件类型')
                map.set('presentMachine', '作业机械')
                map.set('containerNum', '自然箱')
                map.set('teu', '作业标箱量')
                map.set('piece', '计件工时')
                let params = this.$assist.copySearchConditions(this.condition)
                wzWorkTeamDetail(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("作业明细", exportRecords);
                })
            }
        },
        computed: {
            startPickerOptions() {
                let endDate = this.condition["search_LTE_jobTime"];
                return {
                    disabledDate(time) {
                        if (endDate) {
                            return time.getTime() > new Date(endDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
            endPickerOptions() {
                let startDate = this.condition["search_GTE_jobTime"];
                return {
                    disabledDate(time) {
                        if (startDate) {
                            return time.getTime() < new Date(startDate).getTime() - 60 * 60 * 24 * 1000;
                        } else {
                            return false;
                        }
                    }
                };
            },
        }
    }
</script>

<style scoped>

</style>
